import React, { useState, useRef, useEffect } from 'react';
import { connect } from 'umi'
import { Modal, Card, Tabs, Radio, Row, Col, Space } from 'antd';
import { settle_type, CommissionType } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import { useUpdateEffect } from 'ahooks';
const SelelctModel = (props) => {
  const { loading, visible = {}, onClose, onOk, dispatch } = props;
  const { show = false, details = [] } = visible;
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [list, setList] = useState([])
  useEffect(() => {
    fetchList()
  }, [])
  const fetchList = () => {
    dispatch({
      type: 'commission/fetchListCommissionLevel',
      payload: {
        commissionType: 'level'
      },
      callback: (e = {}) => {
        const { commissionLevelList = [] } = e
        setList(commissionLevelList)
      }
    });
  }
  const modalProps = {
    title: `选择佣金配置`,
    width: 1200,
    visible: typeof visible === 'boolean' ? visible : show,
    zIndex: 1001,
    okText: '确认',

  };
  useEffect(() => {
    if (visible) {
      setSelectedRowKeys([...selectedRowKeys, ...details])
    }
    else {
      setSelectedRowKeys([])
    }
  }, [visible])
  const childRef = useRef();
  const rowSelection = {
    type: 'radio',
    hideSelectAll: true,
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRows);
    },
    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),

    preserveSelectedRowKeys: true,
  };


  const getColumns = [
    {
      title: '分佣等级',
      dataIndex: 'levelName',
    },
  ];

  return (
    <Modal
      {...modalProps}
      onCancel={onClose}
      onOk={() => {
        onOk && onOk(selectedRowKeys);
        onClose();
      }}
    >
      <Space size={'large'} direction='vertical' style={{ width: '100%', }}>
        <TableDataBlock
          // searchItems={searchItems}
          rowSelection={rowSelection}
          columns={getColumns}
          loading={loading}
          rowKey={(record) => `${record.id}`}
          list={list}
          pagination={false}
        ></TableDataBlock>
      </Space>

    </Modal>
  )
}
export default connect(({ loading, commission }) => ({
  // list: commission.organizationCommissionList,
  loading: loading.models.commission,
}))(SelelctModel);

